<template>
    <div class="roleadd">
        <div class="outmain ba_f">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>新增用户组</span>
                </div>
            </div>
            <el-form ref="form" :model="form" label-width="180px">
                <el-form-item label="排序">
                    <el-input v-model.trim="form.sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" prop="role_name" :required="true">
                    <el-input v-model.trim="form.role_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限">
                    <el-tree
                            :data="powerData"
                            :check-strictly="checkStrictly"
                            show-checkbox
                            node-key="id"
                            ref="tree"
                            :default-checked-keys="currentKey"
                            :props="defaultProps"
                    >
                    </el-tree>
                </el-form-item>
            </el-form>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
    </div>
</template>

<script>
    import {roleSave,authRole} from "@/api/setup";

    export default {
        name: "roleadd",
        created() {
            this.init()
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
        },
        data() {
            return {
                form: {
                    role_name: "",
                    sort: "1",
                },
                currentKey: [],
                powerData: [
                    {
                        id: 1,
                        label: '外卖',
                        children: [{
                            id: 11,
                            label: '订单处理',
                            children: [{
                                id: 111,
                                label: '订单处理'
                            }, {
                                id: 112,
                                label: '订单查询'
                            }, {
                                id: 113,
                                label: '自提订单'
                            }]
                        }, {
                            id: 12,
                            label: '订单提醒',
                            children: [{
                                id: 121,
                                label: '模板消息'
                            }, {
                                id: 122,
                                label: '短信消息'
                            }, {
                                id: 123,
                                label: '打印机管理'
                            }, {
                                id: 124,
                                label: '语音提醒'
                            }]
                        }, {
                            id: 13,
                            label: '外卖设置',
                        }, {
                            id: 14,
                            label: '配送设置',
                            children: [{
                                id: 121,
                                label: '同城配送'
                            }, {
                                id: 122,
                                label: '配送区域'
                            }]
                        }]
                    },
                    {
                        id: 2,
                        label: '商品',
                        children: [{
                            id: 21,
                            label: '商品管理',
                            children: [{
                                id: 211,
                                label: '商品管理'
                            }, {
                                id: 212,
                                label: '分类管理'
                            }, {
                                id: 213,
                                label: '自提订单'
                            }]
                        }, {
                            id: 22,
                            label: '商品扩展',
                            children: [{
                                id: 221,
                                label: '规格库'
                            }, {
                                id: 222,
                                label: '属性库'
                            }, {
                                id: 223,
                                label: '加料库'
                            }, {
                                id: 224,
                                label: '单位库'
                            }, {
                                id: 225,
                                label: '商品标签'
                            }, {
                                id: 226,
                                label: '打印标签'
                            }]
                        }, {
                            id: 23,
                            label: '快速导入'
                        }]
                    }, {
                        id: 3,
                        label: '用户',
                        children: [{
                            id: 31,
                            label: '用户概况'
                        }, {
                            id: 32,
                            label: '用户管理',
                            children: [{
                                id: 321,
                                label: '用户查询'
                            }, {
                                id: 322,
                                label: '用户导入'
                            }, {
                                id: 323,
                                label: '标签管理'
                            }]
                        }, {
                            id: 33,
                            label: '用户设置'
                        }]
                    }, {
                        id: 4,
                        label: '财务',
                        children: [{
                            id: 41,
                            label: '资产总览'
                        }, {
                            id: 42,
                            label: '门店财务',
                            children: [{
                                id: 421,
                                label: '账户管理'
                            }, {
                                id: 422,
                                label: '财务对账'
                            }]
                        }]
                    }, {
                        id: 5,
                        label: '装修',
                        children: [{
                            id: 51,
                            label: '装修管理',
                            children: [{
                                id: 511,
                                label: '页面列表'
                            }, {
                                id: 512,
                                label: '全店风格'
                            }, {
                                id: 513,
                                label: '点单风格'
                            }]
                        }, {
                            id: 52,
                            label: '其他',
                            children: [{
                                id: 521,
                                label: '素材管理'
                            }]
                        }]
                    }, {
                        id: 6,
                        label: '数据',
                        children: [{
                            id: 61,
                            label: '数据概况',
                        }, {
                            id: 62,
                            label: '实时分析',
                        }, {
                            id: 63,
                            label: '流量分析',
                        }, {
                            id: 64,
                            label: '商品分析',
                        }, {
                            id: 65,
                            label: '交易分析',
                        }]
                    }, {
                        id: 7,
                        label: '应用',
                        children: [{
                            id: 71,
                            label: '应用列表',
                        }]
                    }, {
                        id: 8,
                        label: '设置',
                        children: [{
                            id: 81,
                            label: '基础设置',
                        }, {
                            id: 82,
                            label: '通用设置',
                        }, {
                            id: 83,
                            label: '订单提醒',
                            children: [{
                                id: 831,
                                label: '短信设置',
                            }, {
                                id: 832,
                                label: '模板消息',
                            }, {
                                id: 833,
                                label: '打印设置',
                            }, {
                                id: 834,
                                label: '语音提醒',
                            }]
                        }, {
                            id: 84,
                            label: '支付设置',
                        }, {
                            id: 85,
                            label: '配送设置',
                        }, {
                            id: 86,
                            label: '其他设置',
                            children: [{
                                id: 861,
                                label: '页面标题',
                            }, {
                                id: 862,
                                label: '公告管理',
                            }, {
                                id: 863,
                                label: '店铺服务',
                            }, {
                                id: 864,
                                label: '资讯管理',
                            }, {
                                id: 865,
                                label: '帮助中心',
                            }, {
                                id: 866,
                                label: '远程附件',
                            }]
                        }, {
                            id: 87,
                            label: '权限管理',
                            children: [{
                                id: 871,
                                label: '操作员管理',
                            }, {
                                id: 872,
                                label: '角色管理',
                            }]
                        }]
                    }, {
                        id: 9,
                        label: '权限',
                        children: [{
                            id: 91,
                            label: '小程序列表',
                        }, {
                            id: 92,
                            label: '授权管理',
                            children: [{
                                id: 921,
                                label: '更新记录',
                            }, {
                                id: 922,
                                label: '授权详情',
                            }]
                        }, {
                            id: 93,
                            label: '其他',
                            children: [{
                                id: 931,
                                label: '缓存设置',
                            }]
                        }]
                    }],
                defaultProps: {
                    children: 'children',
                    label: 'nav_name'
                },
                id:'',
                checkStrictly:false,
            }
        },
        methods: {
            async init(){
                const {msg,data} = await authRole();
               this.powerData = data?data:[]
            },
            async edit(){
                this.checkStrictly = true
                const {msg,data} = await authRole({id:this.id});
                // let treetCheckedKeys = data.role_str?data.role_str:[]
                //     ,treeHalfCheckedKeys = data.pid?data.pid:[]
                // // console.log(treetCheckedKeys,treeHalfCheckedKeys)
                // let difference=treetCheckedKeys.filter(item=>!treeHalfCheckedKeys.includes(item))
                this.$nextTick(() => {
                    this.currentKey = data.role_str
                    this.form.role_name = data.role_name
                    this.form.sort = data.sort
                    setTimeout(()=>{
                        this.checkStrictly = false;
                    },0)
                })
            },
            // submitForm() {
            //     console.log(this.$refs.tree.getCheckedKeys());
            //     // this.currentKey = this.$refs.tree.getCheckedKeys()
            // },
            submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        let treetCheckedKeys = this.$refs.tree.getCheckedKeys()
                            ,treeHalfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
                        // console.log(treetCheckedKeys,treeHalfCheckedKeys)
                        this.form.id = this.id?this.id:''
                        this.form.role_str = treetCheckedKeys.concat(treeHalfCheckedKeys)
                        const {msg} = await roleSave(this.form);
                        this.$baseMessage(msg, "success");
                        var sessionStore = window.sessionStorage;
                        sessionStore.removeItem("topMenu");
                        sessionStore.removeItem("leftMenu");
                        this.$router.push({path: '/role'})
                    } else {
                        return false;
                    }
                });
            },
        }
    };
</script>
<style lang="scss">
    .roleadd {
        .el-tree-node__content {
            height: 46px;
        }
    }
</style>

